<template>
	<view>
		<view class="user-section">
			<view class="bg" ></view>
			
			<view class="portrait-box">
				<image class="portrait" :src="userInfo.portrait || '/static/missing-face.png'"></image>
				<text class="pt-upload-btn yticon icon-paizhao"></text>
			</view>
			
		</view>
		<view style="margin-left: 60px;margin-right:75px;">
			<view class="hor">
				<text class="txt"> 昵称</text>
				<input  class="uni-input"  placeholder="修改" />
			</view>
			<view class="hor">
				<text class="txt"> 性别</text>
				<radio-group @change="radioChange">
					<label   v-for="(item, index) in sex" :key="item.value" >
						<radio :value="item.value" :checked="item.checked"  />
						<span class="txt">{{item.label}}</span>
					</label>
				</radio-group>
			</view>
			<view class="hor">
				<text class="txt" style="margin-right: 6px;"> 个性签名</text>
				<view class="pingjia_box">
				<textarea   placeholder="个性签名..." maxlength="-1" v-model="comment" />
				</view>
			</view>
			<view class="hor">
				<text class="txt"> 生日</text>
				<input  class="uni-input"  placeholder="修改" />
			</view>
			<view class="hor">
				<text class="txt"> 地区</text>
				<input  class="uni-input"  placeholder="修改" />
			</view>
			<view class="hor">
				<text class="txt"> 兴趣标签</text>
				<input  class="uni-input"  placeholder="修改" style="margin-top:8px;"/>
			</view>
			<view class="hor">
				
				<button > 保存</button>
				<button > 取消</button>
				
			</view>
		</view>
		
		
		
		
		
		
	</view>
</template>

<script>
import MyTextarea from '../../uni_modules/my-textarea/components/my-textarea/my-textarea.vue'
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	export default {
		data() {
			return {
				sex: [{
						label: "男",
						value: "0",
						checked: true
					}, {
						label: "女",
						value: "1"
					}],
					addressData: {
						sex: "0",
					}

			};
		},
		
		methods: {
			radioChange(e) {
				this.addressData.sex = this.radio = e.detail.value
			}
		},

		
		
		computed:{
			...mapState(['userInfo']),
			MyTextarea,
		}
	}
</script>

<style lang="scss">
	page{
		background: #ffffff;
		
	}
	
	.hor{
		display: inline-flex;
		flex-direction: row;
		width:100%;
		margin-bottom: 10px;
		
	}
	.ver{
		display: inline-flex;
		flex-direction: column;
		width: 100%;
		}
	
	
	
	.user-section{
		display:flex;
		align-items:center;
		justify-content: center;
		height: 440upx;
		padding: 40upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			/* opacity: .7; */
			/* background-color: #ffffff; */
		}
		.portrait-box{
			width: 200upx;
			height: 200upx;
			border:6upx solid #fff;
			border-radius: 50%;
			position:relative;
			z-index: 2;
		}
		.portrait{
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon{
			position:absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0,0,0,.4);
		}
		.pt-upload-btn{
			right: 0;
			bottom: 10upx;
		}
		.bg-upload-btn{
			right: 20upx;
			bottom: 16upx;
		}
	}

	
	.txt{
		color: #797979;
		font-size: 15px;
		padding-right:20px;
		width:60px;
	}
	
	.uni-input{
		background-color: #ffffff;
		margin-top: 2px;
		box-sizing: border-box;
		border-radius: 6upx;
		border-style: none;
		border:1upx solid #b0e3ff;
	}
	
	
	.pingjia_box {
		min-height: 300upx;
		box-sizing: border-box;
		width:100%;
		border-radius: 16upx;
		border-color: #000000;

		/* padding: 20upx 30upx; */
		border: 1upx solid #b0e3ff;
		textarea {
		min-height: 200upx;
		width:100%;
		border-radius: 16upx;
		overflow: hidden;
		padding: 0 20upx;
		box-sizing: border-box;
		font-size: 26upx;
		color: #f2ffff;
		}
	}


	
	
	
	/deep/button{
		margin-left:40px;
		position: relative;
		font-size: 13px;
		line-height: 1.5;
		color: #ffffff;
		height:20px;
		width: 150px;
		background-color: #b0e3ff;
		margin-top: 18px;
		&:after{
		border-color: #ffffff ;
		border-radius: 15px;
		}
	}
	
	

</style>
